{include  file="common/doc" /}
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <?php echo  $operation['toolbar']?>
        </div>
        <div class="layui-card-body">
            <table class="layui-table" id="table_list" lay-filter="table_list"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="op_table">
    <?php echo $operation['tool']?>
</script>
<template id="form_template" style="display: none">
    <form class="layui-form" id='form' lay-filter="form" style="margin-top:10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">上一级</label>
            <div class="layui-input-inline">
                <input type="text" id="tree" lay-filter="tree" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="menu_name" placeholder="请输入"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择图标</label>
            <div class="layui-input-block">
                <input type="text" id="iconPicker" lay-filter="iconPicker" value="" class="layui-input">
                <input type="hidden" name="icon"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <input type="radio" name="type" lgp-add=""  value="1" title="目录" lay-filter="type"
                       checked>
                <input type="radio" name="type" lgp-add="operation|route" value="2" title="菜单" lay-filter="type">
                <input type="radio" name="type" lgp-add="method|color" value="3" title="按钮" lay-filter="type">
            </div>
        </div>
        <div class="attach_control"></div>

        <div class="layui-form-item">
            <label class="layui-form-label">序号</label>

            <div class="layui-input-inline">
                <input type="hidden" name="menu_parent_id">
                <input type="number" value="255" name="sort" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="form_submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</template>
<div class="layui-hide" id="attach_control">

    <div lgp-name="route">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">路由</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="control" placeholder="控制器" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="method" placeholder="方法" autocomplete="off" class="layui-input">
                </div>
        </div>
    </div>
    </div>
    <div lgp-name="method">
        <div class="layui-form-item">
            <label class="layui-form-label">路由</label>
            <div class="layui-input-inline" style="width: 150px;">
                <input type="text" name="control" placeholder="控制器" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 150px;">
                <input type="text" name="method" placeholder="方法" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div lgp-name="color">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">按钮位置</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="radio" name="attach[location]" value="toolbar" title="工具栏">
                    <input type="radio" name="attach[location]" value="tool" title="列表工具">
                    <input type="radio" name="attach[location]" value="list" title="不显示">
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: 'treeTable/treeTable', //主入口模块
        iconPicker: 'iconPicker/iconPicker' //主入口模块
    }).use(['index', 'util', 'treeTable', 'iconPicker','colorpicker', 'treeSelect', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        var colorpicker = layui.colorpicker;
        var iconPicker = layui.iconPicker;
        var treeSelect = layui.treeSelect;
        function open(data ={}) {
            function treeChooser(input, chooser_node = 0, unset = '') {
                treeSelect.render({
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: 'read?type=tree',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '占位符',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        $("input[name=" + input + "]").val(d.current.id);
                    },
                    success: function (d) {
                        treeSelect.checkNode('tree', chooser_node);
                    }
                });
            }
            function icon(icon = false) {
                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    // 是否开启分页
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12,
                    // 点击回调
                    click: function (data) {
                        $('input[name=icon]').val(data['icon']);
                    }
                });
                if (icon) {
                    iconPicker.checkIcon('iconPicker', icon);
                }
            }
            layer.open({
                type: 1,
                title: '菜单编辑',
                area: ['500px', '500px'],
                content: $('#form_template').html(),
                success: function (lay, index) {
                    form.on('radio(type)', function (obj) {
                        let add = $(this).attr('lgp-add').split('|');
                        let attach = $('#attach_control');
                        let add_attach = $(this).parents('.layui-form-item').next('.attach_control');
                        let attach_str = '';
                            for (let i = 0; i < add.length; ++i) {
                                if (add[i]){
                                    attach_str+=attach.find(`div[lgp-name="${add[i]}"]`).html();
                                }
                            }
                        add_attach.html(attach_str);
                        form.render();
                    });
                    form.render();
                    let url = 'add';
                    if (JSON.stringify(data)!=='{}') {
                        form.val('form', data);
                         $('.layui-form-radioed').click();
                        if (data['attach']){
                            let attach =JSON.parse( data['attach']);
                            Object.keys(attach).forEach(function(key){
                                data[`attach[${key}]`] =attach[key];
                            });
                        }
                        form.val('form', data);
                        icon(data['icon']);
                        url = 'upd';
                        treeChooser('menu_parent_id', data['menu_parent_id']);
                    } else {
                        icon();
                        treeChooser('menu_parent_id');
                    }

                    form.on('submit(form_submit)', function (ewa) {
                        Object.assign(data,ewa.field);
                        let status = request({'url': url, 'data': data});
                        if (status) {
                            layer.close(index);
                            table();
                        }
                        return false;
                    });
                }
            })
        }
        function table() {
            $.ajax({
                url: 'read',
                method: 'get',
                success: function (response) {
                    var table = treeTable.render({
                        elem: '#table_list',
                        tree: {
                            iconIndex: 2,
                            pidName: 'menu_parent_id',
                            idName: 'menu_id',
                            isPidData: true,
                        },
                        data: response['data'],
                        cols: [
                            {type: 'numbers'},
                            {type: 'checkbox'},
                            {field: 'menu_name', title: '栏目名称', width: 200},
                            {
                                field: 'icon', align: 'center', title: '图标', templet: function (d) {
                                    return d.icon ? '<i class="layui-icon ' + d.icon + '">' : '';
                                }
                            },
                            {
                                field: 'control', align: 'center', title: '控制器/方法', templet: function (d) {
                                    return d.control ? d.control + '/' + d.method : '<span class="layui-badge layui-bg-black">目录</span>';
                                }
                            },
                            {field: 'menu_addtime', align: 'center', title: '添加时间'},
                            {align: 'center', toolbar: '#op_table', title: '操作', width: 300}
                        ],
                        style: 'margin-top:0;'
                    });
                }

            });
        }
        table();
        treeTable.on('tool(table_list)', function (obj) {
            if (obj.event == 'upd') {
                open(obj.data);
            }
            if (obj.event == 'del') {
                let status = request({'url': 'del', 'data': {'menu_id': obj.data['menu_id']}});
                if (status){
                    obj.del();
             }
            }
        });

        $('.layui-card-header').on('click', 'a[lay-event]', function () {
            open();
        });

    });
</script>
</body>
</html>

